<template>
  <div
    :ref="refName"
    :optionData="optionData"
    :title="title"
    style="width: 100%; height: 100%"
  />
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: {
    refName: {
      type: String,
      default: 'ref'
    },
    optionData: {
      type: Object
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      chartData: null
    }
  },
  watch: {
    optionData(newVal) {
      this.chartData = newVal
      console.log(this.chartData)
      this.init()
    }
  },
  mounted() {
  },
  methods: {
    init() {
      const myChart = echarts.init(this.$refs[this.refName])

      const option = {
        graphic: [
          {
            type: 'text',
            left: 'center',
            top: '5%',
            style: {
              text: '客服冬已超时工单量',
              fontSize: '16',
              fontWeight: 'normal'
            }
          }
        ],
        grid: {
          left: '8%',
          bottom: '10%',
          right: '5%',
          top: '15%'
        },
        xAxis: {
          type: 'category',
          data: this.chartData.datestrList,
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.chartData.countList,
            type: 'line',
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#2087D0'
                },
                {
                  offset: 0.7,
                  color: '#9BCBEB'
                }
              ])
            }
          }
        ]
      }

      option && myChart.setOption(option)
    }
  }
}
</script>
